<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,html {
    width: 100%;
    height: 100%;
    margin: 0px
    }
    /* 顶部导航 */
    .nav{
        width:100%;
        height: 30px;
        border-radius: 15px;
        font-size: 20px;
    }
    span{
        font-size: 20px;
        color: rgb(104, 112, 121)
    }
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0px
    }
    ul {
        padding: 0px;
        margin: 0px;
    }
    li {
        list-style: none;
        color: rgb(119, 115, 115);
    }
    /* 顶部导航 */
    .nav{
        width:90%;
        height: 30px;
        margin-left: 5%;
        border-radius: 15px;
        font-size: 20px;
        color: #505050;
        background-image: url(../jpg/搜索.png);
        background-repeat: no-repeat;
        background-position: 10px;
    }
    .content {
        height: 82%;
        width: 100%;
    }
    /* 侧栏:左边内容 */
    .content_left {
        height: 100%;
        width: 22%;
        background-color: rgba(230, 230, 230, 0.541);
        display: inline-block;
    }
    .content_left>ul {
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
    }
    .content_left>ul>li {
        width: 100%;
        height: 10%;
        line-height: 70px;
    }
    .content_left>ul>li:first-child {
        background-color: white;
        border-left: 4px solid rgba(6, 161, 58, 0.849);
        font-weight: 600;
    }

    /* 侧栏:右边内容 */
    .content_right {
        width: 75%;
        height: 100%;
        float: right;
    }
    .content_right_top {
        width: 95%;
        height: 20%;
        background-image: url(../jpg/图1.jpg);
        background-position: 80%;
        background-size: cover;
    }
    .content_right_content {
        margin-top: 10px;
    }
    .content_right_content>ul {
        display: flex;
        flex-wrap: wrap;
    }
    .content_right_content>ul>li {
        width: 23%;
        height: 8%;
        margin: 1%;
        padding: 3%;
        border: 1px solid rgba(216, 210, 210, 0.466);
        border-radius: 10px;
        text-align: center;
        color: rgb(119, 115, 115);
    }
    span {
        color: rgb(119, 115, 115);
    }
    .content_right_content_div {
        margin: 15px 0px;
    }
    /* 底部导航 */
    .bottomnav{
        height:5px;
        width: 100%; 
        background-color: #f8f8f8;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-around;
        margin-top: -15px;
    }
    .logo1{
        height: 50px;
        width: 50px;
        margin-top: 20px;
        margin-left: 25px;
    }
    .container{
        height: 20px;
        color: #505050;
        font-size:20px;
        text-align:center;
        margin-left: 28px;
        margin-top: 5px;
    }

</style>
<body>
    <!-- 顶部部分 -->
    <input class="nav" type="text" placeholder="      网易云课堂">
    <div class="content">
        <!-- 侧栏：左栏 -->
        <div class="content_left">
            <ul>
                <li>办公效率</li>
                <li>职业发展</li>
                <li>编程开发</li>
                <li>产品和设计</li>
                <li>生活方式</li>
                <li>亲子教育</li>
                <li>语言学习</li>
            </ul>
        </div>
        <!-- 侧栏：右栏 -->
        <div class="content_right">
            <div class="content_right_top"></div>
            <div class="content_right_content">
                <div class="content_right_content_div">
                    <span>办公软件</span>
                </div>
                <ul>
                    <li>PPT</li>
                    <li>Excel</li>
                    <li>Word</li>
                    <li>Project</li>
                    <li>Ketnote</li>
                    <li>Outlook</li>
                    <li>更多软件</li>
                </ul>
                <div class="content_right_content_div">
                    <span>工作效率</span>
                </div>

                <ul>
                    <li>时间管理</li>
                    <li>思维导图</li>
                    <li>高效习惯</li>
                </ul>
                <div class="content_right_content_div">
                    <span>电脑基础</span>
                </div>

                <ul>
                    <li>基础操作</li>
                    <li>常用工具</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部导航 -->
    <div  class="bottomnav">
        <div>
            <img class="logo1" src="../jpg/首页.png" >
            <p class="container">首页</p>
        </div>
        <div>
            <img class="logo1"  src="../jpg/分类.png" >
            <p class="container">分类</p>
        </div>
        <div>
            <img class="logo1" src="../jpg/我的学习.png" >
            <p class="container">我的学习</p>
        </div>
        <div>
            <img class="logo1" src="../jpg/账号.png" >
            <p class="container">账号</p>
        </div>
       
    </div>
    
    
    
</body>
</html>